<template>
    <div class="main-con goodsClassification">
        <!-- 搜索框 -->
        <div class="search-con">
            <div class="search-item">
                <div class="search-item-title">分类名称</div>
                <div class="search-item-input">
                    <el-input size="mini" v-model="formData.userName" placeholder="请输入分类名称" @change="handleSearch"></el-input>
                </div>
            </div>
            <div class="search-item">
                <div class="search-item-title"></div>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
            </div>
        </div>

        <div class="main-info-con">
            <!-- 树形菜单 -->
            <div class="tree-menu-con">
                1111
            </div>

            <div class="table-info-con">
                <!-- 表格数据 -->
                <div class="table-con" v-loading="loading">
                    <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}">
                        <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="userName" label="操作人" width="" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="storeName" label="操作门店" width="" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="sourcesName" label="操作来源" width="" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="moudleName" label="操作模块" width="" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="time" label="操作时间" width="" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="remark" label="操作内容" width="" align="center" :show-overflow-tooltip="true">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'goodsClassification',
    data () {
        return {
            // 搜索条件
            formData: {
                userName: "", //操作人
                pageNum: 1,
                pageSize: 10
            },
            //表格数据
            tableData: [], //表格信息
            total: null, //表格总条数
            loading: false //表格加载动画
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-info-con{
    width: 100%;
    margin-top: 10px;
    display: flex;
}
.main-info-con .tree-menu-con{
    width: 200px;
    height: 200px;
}
.main-info-con .table-info-con{
    width: 100%;
}
/* .table-con{
    width: 100%;
} */
</style>